<template>
  <div ref="wrapper" class="food">
    <div class="content">
      <ul>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
        <li>12322</li>
      </ul>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'food',
  data () {
    return {
      scroll: null
    }
  },
  methods: {
    initscroll () {
      this.scroll = new Bscroll(this.$refs.wrapper, {
        click: true, /** 原生点击不用，元素点击需要设置 */
        probeType: 3, /** 0或1不监听滚动，2不监听惯性滚动 */
        pullUpLoad: true /** 设置上拉加载 */
      })
      /* 监听滚动位置信息 */
      this.scroll.on('scroll', (postion) => {
        console.log(postion)
      })
      /** 监听滚到末端上拉加载 */
      this.scroll.on('pullingUp', () => {
        console.log('上拉加载')
        setTimeout(() => {
          this.scroll.finishPullUp() /** 设置上拉加载间隔时间  */
        }, 2000)
      })
    }

  },
  mounted () {
    this.initscroll()
  }
}
</script>

<style lang="scss" scoped>
.food {
  width: 100%;
  height: 300px;
  background-color: red;
  // position: fixed;
  // top: 0;
  // left: 0;
  // right: 0;
  // bottom: 0;
  // background: #fff;
//   overflow: hidden;
//   z-index: 10;
}
</style>
